<template>
	<view class="page">
		<!-- 头部 -->
		<view class="custom-navigation-bar">
			<u-row>
				<view class="navigation-title">
					全球艺术品投资智慧新生质态数字化转型交易工具
				</view>
			</u-row>
			<u-row>
				<u-col span="3"><u-image height="80" width="80" src="/static/logo/logo.png" :lazy-load="true"></u-image>
				</u-col>
				<u-col span="9">
					<u-row>
						<u-col span="8">
							<view class="subtitle">
								<text>全国古玩城</text>
							</view>
							<view class="subtitle">
								<view class="" style="padding-left: 50rpx;">
									<text>线下<text style="color: #56ff56;">·</text>线上一体化</text>
								</view>

							</view>
						</u-col>
						<u-col span="4">
							<view class="click-ruzhu" @click="goInMerchant"> 点击入驻 </view>
						</u-col>
					</u-row>
				</u-col>
			</u-row>

		</view>
		<!-- 页面主体 -->
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"
			:top="0">
			<view class="main" v-show="classifyShow===0">
				<!-- 平台轮播 -->
				<view class="banner">

					<u-swiper @click="offical" :list="swiperList" indicator indicatorMode="line" circular></u-swiper>
				</view>
				<!-- 行业资讯 广告位招商 -->
				<view class="hangyeguanggao">
					<u-row>
						<u-col span="5.5">
							<!-- <view class="hangyezixun" @click="goHangyezixun">
								行业资讯
							</view> -->
							<view class="" style="margin: 10rpx 0 10rpx;">

								<u-button color="#ffff00" customStyle="color:#aa55ff" shape="circle" text="行业资讯"
									size="large" @click="goHangyezixun"></u-button>
							</view>
						</u-col>
						<u-col span="1"></u-col>
						<u-col span="5.5">
							<view class="guanggaowei">

								<u-button color="#ffff00" customStyle="color:#aa55ff" shape="circle" text="广告位招商"
									size="large" @click="goHangyeguanggao"></u-button>
							</view>
							<!-- <view class="guanggaowei" @click="goHangyeguanggao">
								广告位招商
							</view> -->


						</u-col>
					</u-row>
				</view>
				<!-- 商家列表 -->
				<view class="recommend-info">
					<view class="goods-list">
						<view class="list" v-for="(item,index) in goodsList" @click="onSkip(item)" :key="index">
							<!-- 商家图片 -->
							<view class="pictrue">
								<u-swiper :list="item.banner_list" indicator indicatorMode="line" circular></u-swiper>
							</view>
							<!-- 商家名称 -->
							<view class="title-tag">
								<view class="tag">
									{{ item.name }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<ClassifyData v-show="classifyShow!=0"></ClassifyData>
		<!-- tabbar -->
		<TabBar :tabBarShow="0"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	import ClassifyData from '../../components/ClassifyData/ClassifyData.vue';
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	// 引入htppt请求
	import {
		getHomeData,
		getzytStore
	} from '@/config/api.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			TabBar,
			ClassifyData,
		},
		data() {
			return {
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					use: false
				},
				swiperList: {
					image_url: []
				},
				slideNum: 0,
				goodsList: [],

				classifyShow: 0,
				// 页面高度
				pageHeight: 500,
			}
		},
		onReady() {
			uni.hideTabBar();


		},
		onLoad() {
			this._getHomeData();
			this._getzytSyore()
		},

		onPageScroll(e) {
			let scrollTop = e.scrollTop;
			if (scrollTop > 0) {
				this.pageHeight = 210;
			} else {
				this.pageHeight = 500;
			}
		},
		onReachBottom() {
			console.log(12333);
		},
		methods: {
			goHangyezixun() {
				uni.navigateTo({
					url: '/moduleA/hangyezixun/hangyezixun'
				})
			},
			goHangyeguanggao() {
				uni.navigateTo({
					url: '/moduleA/guanggaowei/guanggaowei'
				})
			},
			// 获取首页数据
			_getHomeData() {
				getHomeData().then(data => {
					this.swiperList = data.banner.map(item => item.image_url);
					this.goodsList = data.category;
					uni.setStorageSync('navList',data.category)
				})
			},
			// 获取公司信息
			async _getzytSyore() {
				getzytStore().then(data => {
					console.log(data, '公司信息获取成功')
					this.zytStore = data
				}).catch(err => {
					console.log('公司信息获取失败：', err)
				})
			},


			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				// this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				setTimeout(() => {
					this.mescroll.endByPage(10, 20);
				}, 2000)
			},
			/**
			 * 菜单导航滚动
			 */
			ScrollMenu(e) {
				let scrollLeft = e.target.scrollLeft;
				const query = uni.createSelectorQuery().in(this);
				query.select('.nav').boundingClientRect(data => {
					let wid = e.target.scrollWidth - data.width - (data.left * 2 + 5);
					this.slideNum = (scrollLeft / wid * 300) / 2;
				}).exec();
			},

			/**
			 * 我要入住点击
			 */
			goInMerchant() {
				uni.navigateTo({
					url: '/moduleA/MerchantIn/MerchantIn'
				})
			},
			/**
			 * 分类点击
			 * @param {Object} item
			 * @param {Number} index
			 */
			onClassify(item, index) {
				this.classifyShow = index;
			},
			/**
			 * 跳转点击
			 * @param {String} item 跳转类型
			 */
			onSkip(item) {
				const name = item.name + '-市场';
				// console.log({
				// 	'id': item.id,
				// 	'name': item.name
				// });
				// item.name = item.name + '-市场'
				uni.navigateTo({
					url: `/moduleA/markstore/markList?title=${encodeURIComponent(name)}&id=${item.id}`
				});

			},
			// 公司简介
			offical() {
				let a = JSON.stringify(this.zytStore)
				uni.navigateTo({
					url: `/pages/offical/offical?zytStore=${a}`
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	@import 'home.scss';

	.hangyeguanggao {

		padding-left: 40upx;
		padding-right: 40upx;
		// padding-bottom: 30upx;
		width: 100%;

	}

	.hangyezixun {
		background-color: #ffff00;
		color: #fff;
		padding: 40rpx;
		text-align: center;
		border-radius: 3%;
	}

	.guanggaowei {

		transform: scale(1);
		/* 初始缩放为1（100%大小） */
		animation: pulse 3s ease-in-out infinite;
		/* 应用动画，持续时间为5秒，无限循环 */
	}

	.custom-navigation-bar {
		margin-left: 40upx;
		margin-right: 40upx;
		margin-top: 85rpx;
		height: 200rpx;
		overflow: hidden;
		/* 防止内容溢出 */
	}

	.navigation-title {
		color: #ffff00;
		font-size: x-large;
		font-weight: 800;
		white-space: nowrap;
		box-sizing: border-box;
		display: inline-block;
		/* 使得可以设置宽度 */
		width: 100%;
		/* 设置宽度为父元素宽度 */
		position: relative;
		/* 为子元素定位 */
		animation: scroll 10s linear infinite;
	}

	.subtitle {
		font-size: large;
		padding-left: 20rpx;
		font-weight: 800;
		// text-align: center;
		color: #ffff00;
	}

	/* 定义关键帧 */
	@keyframes scroll {
		0% {
			transform: translateX(100%);
			/* 初始位置在视图右侧 */
		}

		100% {
			transform: translateX(-100%);
			/* 结束位置在视图左侧 */
		}
	}

	// 入驻
	.click-ruzhu {
		font-weight: 800;
		// font-size: large;
		justify-content: center;
		display: flex;
		align-items: center;
		color: #fff;
		height: 90rpx;
		width: 160rpx;
		border-radius: 50%;
		background-color: #71e475;
		transform: scale(1);
		/* 初始缩放为1（100%大小） */
		animation: pulse 3s ease-in-out infinite;
		/* 应用动画，持续时间为5秒，无限循环 */
	}

	/* 定义动画关键帧 */
	@keyframes pulse {

		0%,
		100% {
			transform: scale(1.1);
			/* 开始和结束时大小为100% */
		}

		25% {
			transform: scale(0.9);
			/* 缩小到50% */
		}

		50% {
			transform: scale(1.1);
			/* 放大到100% */
		}

		75% {
			transform: scale(0.9);
			/* 再次缩小到50% */
		}

	}
</style>